<script setup lang="ts">
import { ref, toRaw, onMounted, watch } from "vue";
import { formRules } from "../utils/rule";
import { FormBillProps } from "../utils/types";
import { DictSelect } from "@/components/common/DictSelect";
import { getDictTag } from "@/utils/dict";

const props = withDefaults(defineProps<FormBillProps>(), {
  formInline: () => ({
    purchaseOrderId: "",
    com: undefined,
    comName: undefined,
    num: undefined,
    fare: undefined,
    type: 1
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

const dataList = JSON.parse(localStorage.getItem("dictList")) || [];

watch(
  () => newFormInline.value.com,
  async newValue => {
    newFormInline.value.comName = getDictTag(
      dataList,
      "EXPRES_COMPANY",
      newValue
    );
  }
);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="70px"
  >
    <el-row v-if="newFormInline.type == 1">
      <el-col :span="16" class="m-auto">
        <el-form-item label="承运商" prop="com">
          <DictSelect
            v-model="newFormInline.com"
            dict-type="EXPRES_COMPANY"
            clearable
            class="!w-[full]"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="newFormInline.type == 1">
      <el-col :span="16" class="m-auto">
        <el-form-item label="运单号" prop="num">
          <el-input
            v-model="newFormInline.num"
            clearable
            placeholder="请输入运单号"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="newFormInline.type !== 1">
      <el-col :span="16" class="m-auto">
        <el-form-item
          label="运费"
          prop="fare"
          :rules="[
            {
              required: true,
              message: '请输入运费',
              trigger: 'blur'
            }
          ]"
        >
          <el-input
            v-model="newFormInline.fare"
            clearable
            placeholder="请输入运费"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
